<template>
	<view class="h-full flex flex-col" style="overflow: hidden;position: absolute;width: 100%; height: 100%;">
		<view class="op-f">
			<view class="add-btn" @click="gotoPage('/pages/my/addPark')">
				<image src="/static/my/add.png" mode="widthFix"></image>
				<text>添加车位</text>
			</view>

			<view class="tab">
				<text :class="cInx == index ? 'active' : ''" v-if="index!=2" v-for="(item, index) in names" @click="changeInx(index)">{{
					item }}</text>
			</view>
		</view>

		<view class="pile-box">
			<view class="pile-item" v-for="item in list">
				<view class="jiao" v-if="item.speed">{{ item.speed }}</view>
				<view class="res-top">
					<text class="res-top-l"
						:class="{ 'bg-green': item.status == 1, 'bg-yellow': item.status == 2, 'bg-orange': item.status == 3, 'bg-red': item.status == 4 }">
						<template v-if="item.status === 1">正常</template>
						<template v-if="item.status === 2">故障</template>
						<template v-if="item.status === 3">被占用</template>
						<template v-if="item.status === 4">停用</template>
					</text>
					<view class="res-top-c">
						<view class="res-img">
							<image :src="item.pic" mode="widthFix"></image>
						</view>
						<view class="res-text">
							<text class="res-title">{{ item.name }}{{ item.brand ? '(' + item.brand + ')' : '' }}</text>
							<view class="res-flex">
								<text>编号:{{ item.sn }}</text>
								<text v-if="item.rate">功率:{{ item.rate }}kw</text>
							</view>
							<text decode="decode">营业时间:{{ item.start_time }}-{{ item.end_time }} <block v-if="item.start_time2"> |{{ item.start_time2 }}-{{ item.end_time2 }} </block><block v-if="item.start_time3">|{{ item.start_time3 }}-{{ item.end_time3 }} </block></text>
							<text>停车费:{{ item.price }}元/小时</text>
						</view>
					</view>
				</view>
				<view class="pile-b" v-if="item.status!=3">
					<view class="pile-btn yellow" @click="gotoPage('/pages/my/addPark?item=' + JSON.stringify(item))">
						<image src="/static/my/p1.png" mode="widthFix"></image>
						<text>修改</text>
					</view>
					<view class="pile-btn red" @click="deletePark(item.id)">
						<image src="/static/my/p2.png" mode="widthFix"></image>
						<text>删除</text>
					</view>
					<view class="pile-btn orange">

					</view>
					<view class="pile-btn orange" v-if="item.status != 4" @click="update_status(item.id,4)">
						<image src="/static/my/p5.png" mode="widthFix"></image>
						<text>停用</text>
					</view>

					<view class="pile-btn open" v-if="item.status == 4" @click="update_status(item.id,1)">
						<image src="/static/my/p6.png" mode="widthFix"></image>
						<text>启用</text>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			names: ['全部', '正常',  '保修', '占用','停用'],
			cInx: 0,
			type: 0,
			list: []
		}
	},
	onLoad: function (option) {
		this.getList()
	},
	onShow() {
		this.getList()
	},
	methods: {
		async getList() {
			const res = await this.http("get", "/api/park/index", {
				page: 1,status:this.cInx
			})
			this.list = res.data
		},
		async deletePark(id) {
			uni.showModal({
				title: '提示',
				content: '确定要删除该车位吗？',
				success: async (res) => {
					if (res.confirm) {
						const res = await this.http("post", "/api/park/del", {
							id: id
						})
						this.toast(res.message)
						this.getList()
					}
				}
			})
		},
		changeInx(e) {
			this.cInx = e
			this.getList()
		},
		gotoPage(e) {
			uni.navigateTo({
				url: e
			})
		},
		update_status(id,status){
			var that = this
			that.http("get", "/api/park/edit_status", {
				id: id,user_id:uni.getStorageSync('user_id'),status:status
			}).then(res => {
				that.getList()
			})
		}
	}
}
</script>

<style lang="less" scoped>
page {
	height: 100%;
}

.op-f {
	width: 100%;
	padding: 0 30upx;
	box-sizing: border-box;
	left: 0;
	z-index: 9;
	background-color: #fff;
	padding-top: 30rpx;

	.add-btn {
		width: 100%;
		height: 88upx;
		border-radius: 16upx;
		background: #FFFBDB;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px solid #fff;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);

		image {
			width: 44upx;
			height: auto;
			display: block;
			margin-right: 10upx;
		}

		text {
			font-size: 36upx;
			color: #000;
			font-weight: 700;
		}
	}

	.tab {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 0;

		text {
			font-size: 36upx;
			color: #9E9E9E;
		}

		.active {
			font-size: 48upx;
			color: #3662EC;
		}
	}
}

.pile-box {
	width: 100%;
	padding: 0upx 30upx 0 30upx;
	box-sizing: border-box;
	flex: 1;
	overflow: auto;

	.pile-item {
		width: 100%;
		border-radius: 16upx;
		overflow: hidden;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		margin-bottom: 30upx;
		position: relative;

		.jiao {
			position: absolute;
			top: 10upx;
			right: 10upx;
			width: 40upx;
			height: 40upx;
			border-radius: 8upx;
			background: #FA5151;
			color: #fff;
			font-size: 24upx;
			text-align: center;
			line-height: 40upx;
		}

		.res-top {
			width: 100%;
			display: flex;

			.color1 {
				background-color: #FF8F1F;
			}

			.color2 {
				background-color: #FFC300;
			}

			.color3 {
				background-color: #FA5151;
			}

			.res-top-l {
				width: 40upx;
				font-size: 24upx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}

			.res-top-c {
				display: flex;
				align-items: center;
				width: 90%;
				padding: 10upx;
				box-sizing: border-box;

				.res-img {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 10upx;

					image {
						width: 100%;
						height: auto;
					}
				}

				.res-text {
					.res-flex {
						display: flex;

						text {
							min-width: 200upx;
							margin-right: 40upx;
						}
					}

					.res-title {
						font-size: 28upx;
						color: #000;
					}

					.green {
						color: #00B578;
					}

					text {
						display: block;
						font-size: 24upx;
						color: #9E9E9E;
					}
				}
			}
		}

		.pile-b {
			width: 100%;
			padding: 20upx 20upx 0 20upx;
			box-sizing: border-box;
			border-top: 1px solid #D8D8D8;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.yellow {
				color: #FFC300;
			}

			.red {
				color: #FF0000;
			}

			.blue {
				color: #3662EC;
			}

			.orange {
				color: #FF8F1F;
			}

			.green {
				color: #00B578;
			}

			.open {
				color: #07B9B9;
			}

			.pile-btn {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 15upx;

				image {
					width: 48upx;
					height: auto;
					display: block;
					margin-right: 10upx;
				}

				text {
					font-size: 36upx;
				}
			}
		}
	}
}
</style>